<template>
  <div>
    <div class="user-area">
      <div class="title">
        <div class="point"></div>
        <span>下载</span>
      </div>
      <el-form>
        <el-form-item label="下单模板">
          <el-col :span="3">
            <el-upload :action="uploadExcelAction"
                       :on-preview="handlePreview"
                       :on-remove="handleRemove"
                       multiple
                       :limit="1"
                       :headers="{ Authorization: getToken() }"
                       :data="{ orderFile: '下单模板',typeName: '下单模板' }"
                       :on-exceed="handleExceed"
                       :on-success="uploadSuccess"
                       :file-list="orderfileList">
              <el-button size="small"
                         type="primary">上传</el-button>
            </el-upload>
          </el-col>
          <el-col :span="4">
            <el-button size="small"
                       type="primary"
                       @click="downloadOrder">下载</el-button>
          </el-col>
        </el-form-item>
        <el-form-item label="合同模板">
          <el-col :span="3">
            <el-upload :action="uploadExcelAction"
                       :on-preview="handlePreview"
                       :on-remove="handleRemove"
                       multiple
                       :limit="1"
                       :headers="{ Authorization: getToken() }"
                       :data="{ contractFile: '合同模板',typeName: '合同模板' }"
                       :on-exceed="handleExceed"
                       :on-success="uploadSuccess"
                       :file-list="contractfileList">
              <el-button size="small"
                         type="primary">上传</el-button>
            </el-upload>
          </el-col>
          <el-col :span="4">
            <el-button size="small"
                       type="primary"
                       @click="downContract">下载</el-button>
          </el-col>
        </el-form-item>
        <el-form-item label="配送模板">
          <el-col :span="3">
            <el-upload :action="uploadExcelAction"
                       :on-preview="handlePreview"
                       :on-remove="handleRemove"
                       multiple
                       :limit="1"
                       :headers="{ Authorization: getToken() }"
                       :data="{ sendFile: '配送模板',typeName: '配送模板' }"
                       :on-exceed="handleExceed"
                       :on-success="uploadSuccess"
                       :file-list="sendfileList">
              <el-button size="small"
                         type="primary">上传</el-button>
            </el-upload>
          </el-col>
          <el-col :span="4">
            <el-button size="small"
                       type="primary"
                       @click="downloadSend">下载</el-button>
          </el-col>
        </el-form-item>
      </el-form>
      <div class="foot"></div>
    </div>
  </div>
</template>

<style lang="scss">
.el-upload input {
  display: none;
}
</style>

<script>
import '@/style/info.scss'
import '@/style/common.scss'
import { api, devBaseURL, devBasePicURL } from '@/api'
import { HTTPSUCCESS, HTTPDATAFAIL, HTTPPARAMFAIL, HTTPUNKOWNFAIL } from '@/components/constant'
import { getToken, getUser } from '@/utils/auth'

export default {
  data() {
    return {
      orderUrl: null,
      contractUrl: null,
      sendUrl: null,
      orderfileList: [],
      contractfileList: [],
      sendfileList: [],
      uploadExcelAction: devBaseURL + api.DOWNLOAD_FILE
    }
  },
  activated() {
    this.getUpLoadFile()
  },
  methods: {
    getToken,
    getUpLoadFile() {
      this.$http.get(api.DOWNLOAD_FILE_DETAIL).then(
        res => {
          if (res.error.code === HTTPSUCCESS) {
            this.orderUrl = res.result.orderUrl == null ? res.result.orderUrl : res.result.orderUrl.replace(/(\d{0,3}.){3}\d{0,3}:80/g, devBasePicURL)
            this.contractUrl = res.result.contractUrl == null ? res.result.contractUrl : res.result.contractUrl.replace(/(\d{0,3}.){3}\d{0,3}:80/g, devBasePicURL)
            this.sendUrl = res.result.sendUrl == null ? res.result.sendUrl : res.result.sendUrl.replace(/(\d{0,3}.){3}\d{0,3}:80/g, devBasePicURL)
          }
        }
      )
    },
    downloadOrder() {
      if (this.orderUrl) {
        self.location.href = this.orderUrl
      } else {
        this.$msg._message('无可下载文件请上传', 'warning')
      }
    },
    downContract() {
      if (this.contractUrl) {
        self.location.href = this.contractUrl
      } else {
        this.$msg._message('无可下载文件请上传', 'warning')
      }
    },
    downloadSend() {
      if (this.sendUrl) {
        self.location.href = this.sendUrl
      } else {
        this.$msg._message('无可下载文件请上传', 'warning')
      }
    },
    handleRemove(file, fileList) {
      // 删除钩子
    },
    handlePreview(file) {
      // 预览钩子
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeUpload(file) {
      // 上传前的钩子
    },
    uploadSuccess(response) {
      // 上传成功的回调函数
      if (response.error.code === HTTPSUCCESS) {
        this.$msg._message('上传成功', 'success')
        this.getUpLoadFile()
      }
    }
  }
}
</script>
